<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>营销中心</h3>
			<h4>效果分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="gas-border">
				<nav class="gas-nav">
					<dl class="active">召回效果总览</dl>
					<dl>召回趋势</dl>
				</nav>
				<!--marke-analy-->
				<section class="marke-analy">
					<h3><i></i>数据截止到2018-4-16 23:59:59</h3>
					<!--con-->
					<div class="marke-analy-con">
						<h3>召回计划-效果分析总览</h3>
						<!--list-->
						<div class="marke-analy-list">
							<!--left-->
							<div class="marke-analy-ll">
								<dl>
									<dt>累计召回用户（人）</dt>
									<dd>49</dd>
								</dl>
								<dl>
									<dt>累计召回升数（升）</dt>
									<dd>￥4029.54</dd>
								</dl>
								<dl>
									<dt>累计召回成本</dt>
									<dd>￥283</dd>
								</dl>
								<dl>
									<dt>人均召回成本</dt>
									<dd>￥5.78</dd>
								</dl>
							</div>
							<!--/left-->
							<!--right-->
							<div class="marke-analy-lr">
								<!--/funner-->
								<div class="marke-funnel">
									<div class="marke-funnel-left"></div>	
									<div class="marke-funnel-right"></div>
									<ul>
										<li>计划召回18人</li>
										<li>已召回2人</li>
										<li>召回并复购12人</li>
									</ul>
								</div>
								<!--funner-->
							</div>
							<!--/right-->
						</div>
						<!--list-->
					</div>
					<!--/con-->
					<!--marke-task-recall-->
					<div class="marke-task-recall">
						<h3>数据概览<a class="blue">详情</a></h3>
						<div class="marke-task-list">
							<dl>
								<dt>计划召回（人）</dt>
								<dd>775</dd>
							</dl>
							<dl>
								<dt>已召回（人）</dt>
								<dd>49</dd>
							</dl>
							<dl>
								<dt>召回率%</dt>
								<dd>6.32</dd>
							</dl>
							<dl>
								<dt>召回升数</dt>
								<dd>4029.54</dd>
							</dl>
							<dl>
								<dt>复购人数</dt>
								<dd>38</dd>
							</dl>
							<dl>
								<dt>复购升数</dt>
								<dd>25652.10</dd>
							</dl>
							<dl>
								<dt>发生费用（元）</dt>
								<dd>283</dd>
							</dl>
						</div>
					</div>
					<!--/marke-task-recall-->
					<div class="marke-task-date">
						<span><i class="fa fa-calendar"></i></span><input type="text" name="date" id="date" placeholder="请选择查询时间"/>
					</div>
					
					<div class="marke-analy-con" id="analysis" style="margin-bottom: 30px;">
						<h3>召回计划-效果分析总览</h3>
						<ul class="marke-tasks">
							<li class="active">累计</li>
							<li>新增</li>
						</ul>
						<div class="marke-task-echarts" id="main">
							
							
							
						</div>
						
						
					</div>
					
					
					
					
				</section>
				<!--/marke-analy-->
				
				
				
				
			</div>
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="http://zhihuiyouzhan.oss-cn-hangzhou.aliyuncs.com/static/plugin/echarts/4.0.3/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['jquery','laydate'],function(){
					var laydate=layui.laydate
					var $=layui.jquery
					
					laydate.render({
						elem:'#date',
						type:'date',
						range:'/'
					})
					
				    //gas-nav样式切换
				    $('.gas-nav>dl').bind('click',function(){
				    	$(this).addClass('active').siblings().removeClass('active')
				    })
				    $('.marke-tasks>li').bind('click',function(){
				    	$(this).addClass('active').siblings().removeClass('active')
				    })
				    //maodain
				    $('.gas-nav>dl').eq(1).bind('click',function(){
				    	$('html,body').animate({
				    		scrollTop:$('#analysis').offset().top
				    	},500)
				    })
				    
				    $('.blue').bind('click',function(){
			            parent.layer.open({
			                type:2,
			                title:'召回详情',
			                area: ['800px', '700px'],
			                offset: 'auto',
			                shadeClose:true,
			                content:"details.html"
			            })
			        })
						    
				})
				
					//ECharts
					
						
						var myChart = echarts.init(document.getElementById('main'));
						option = {
						    tooltip: {
						        trigger: 'none',
//								trigger: 'axis',
						        axisPointer: {
						            type: 'cross',
						            crossStyle: {
						                color: '#999'
						            }
						        }
						    },
						    toolbox: {
						        feature: {
						            magicType: {show: true, type: ['line', 'bar','stack','tiled']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    },
						    grid: {
						        left: '1%',
						        right: '2%',
						        top:'80',
						        containLabel: true
						    },
						    legend: {
						        data:['人数','升数']
						    },
						    xAxis: [
						        {
						            type: 'category',
						            data: ['2018-4-1','2018-4-2','2018-4-3','2018-4-4','2018-4-5','2018-4-6','2018-4-7','2018-4-8','2018-4-9','2018-4-10','2018-4-11','2018-4-12'],
						            axisPointer: {
						                type: 'shadow'
						            }
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value',
						            name: '累计人数',
						            splitLine:false
						        },
						        {
						            type: 'value',
						            name: '累计升数',
						            axisLabel: {
						                formatter: '{value} L'
						            },
						            splitLine:false
						        }
						    ],
						    series: [
						        {
						            name:'人数',
						            type:'line',
						             itemStyle:{
						            	color:'#7e2a3a'
						            },
						            data:[122, 156, 325, 154, 168, 158, 158, 333, 440, 183, 175, 123]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            yAxisIndex: 1,
						            data:[23, 28, 56, 84, 112, 140, 168, 196, 185, 123, 265,15]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            yAxisIndex: 1,
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            data:[23, 28, 56, 84, 112, 140, 168, 196, 185, 123, 265,158]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            yAxisIndex: 1,
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            data:[23,56, 84, 112, 140, 168, 196, 185,175,123, 265,158]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            yAxisIndex: 1,
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            data:[28, 56, 84, 112, 140, 168, 196, 185, 123, 265,158,87]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            yAxisIndex: 1,
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            data:[23, 28, 56, 84, 112, 140, 168,185, 123, 265,158,189]
						        },
						        {
						            name:'升数',
						            type:'bar',
						            yAxisIndex: 1,
						            itemStyle:{
						            	color:'#fd5c54'
						            },
						            data:[23,56, 84, 112, 140, 168, 196, 185, 123, 265,158,173]
						        },
						        
						    ]
						};
						myChart.setOption(option);
				
				
				
				
			</script>
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</aside>
		<!--/js-->
</body>
</html>